import React from 'react'
import { Table, Pagination, Tooltip } from 'antd'

// columns 默认属性
const colDefaultProps = {
  align: 'center',
}
// pagination 默认属性
const pageDefaultProps = {
  showSizeChanger: true,
  showQuickJumper: true,
}

const TTable = ({ scroll, columns, pagination = false, ...resProps }: any) => {
  // 处理columns
  const tdRender = (content: any, width?: number) => (
    <Tooltip title={content}>
      <div
        className="overflow_single pointer"
        // style={{ width: scroll ? undefined : width }}
      >
        {content}
      </div>
    </Tooltip>
  )
  const cols = columns.map((_: any) =>
    typeof _.width === 'number' && _.width > 0
      ? {
          key: _.dataIndex,
          ...colDefaultProps,
          render: (text: String) => tdRender(text, _.width),
          ..._,
        }
      : { key: _.dataIndex, ...colDefaultProps, ..._ },
  )

  const tableProps = {
    tableLayout: 'fixed',
    columns: cols,
    pagination: false,
    scroll,
    ...resProps,
  }

  let pageProps = {}
  try {
    const { current, pageSize, total, ...pageResProps } = pagination
    pageProps = {
      ...pageDefaultProps,
      current,
      pageSize,
      total,
      showTotal: (total: number) =>
        `共${total}条数据 第${current}/${Math.ceil(total / pageSize)}页`,
      ...pageResProps,
    }
  } catch {}

  return (
    <div>
      <Table {...tableProps} />
      {pagination && <Pagination {...pageProps} />}
    </div>
  )
}

export default TTable
